<template>
  <div class="hello">
    <!-- 第一列 -->
    <div class="A">
      <div class="A1" id="A1"></div>
      <div class="A2">
        <div style="width:100%;height:30px;line-height:30px;text-align:center;margin-top:15px"><span style="font-size:30px;color:white">攻击检测</span></div>
        <div v-if="arpattack.gatewayAttack!=''||synattack!=''" style="width:100%;margin:0 10px 0 10px">
            <div v-if="arpattack.gatewayAttack!=''">
              <span style="font-size:18px;color:white">疑似检测到ARP攻击:</span><br/>
              <br/>
              <div style="margin-left:30px;color:white;font-size:16px">受攻击IP:<span style="margin-left:10px;color:#2700ff">{{this.arpattack.ipAttack}}</span></div><br/>
              <div style="margin-left:30px;color:white;font-size:16px">受攻击IP网关:<span style="margin-left:10px;color:#2700ff">{{this.arpattack.gatewayAttack}}</span></div><br/>
            </div>
            <div v-else style="width:100%;margin:0 10px 0 10px"></div>

            <div v-if="synattack!=''" style="width:100%;margin:30px 10px 0 0">
              <span style="font-size:18px;color:white">疑似检测到SYN洪泛攻击:</span><br/>
              <br/>
              <div style="margin-left:30px;color:white;font-size:16px">受攻击IP:<span style="margin-left:10px;color:#2700ff">{{this.synattack}}</span></div><br/>
            </div>
            <div v-else style="width:100%;margin:0 10px 0 0"></div>
        </div>

        <div style="width:100%;height:100%;text-align:center;line-height:150px" v-else>
          暂未检测到攻击！
        </div>
      </div>
    </div>
    <!-- 第二列 -->
    <div class="B">
      <div class="B1">
        <sapn style="color:white;font-size:25px;margin-left:150px">局域网数据包监测系统</sapn>
        <span style="font-size:15px;color:red">(本机IP：{{this.ip}})</span>
      </div>
      <div class="B2" id="B2"></div>
      <div class="B3" id="B3"></div>
    </div>
    <!-- 第三列 -->
    <div class="C">
      <el-table
    :data="tableData"
    stripe
    max-height="750"
    style="width: 100%;height:880px">
    <el-table-column
      type="index"
      label="序号">
    </el-table-column>
    <el-table-column
      prop="ip"
      width="160"
      label="高频IP地址">
    </el-table-column>
    <el-table-column
      prop="total"
      label="IP频次">
    </el-table-column>
  </el-table>
    </div>
  </div>
</template>

<script>
import '@/map/china.js'
export default {
  name: 'HelloWorld',
  data () {
    return {
      option:{
          tooltip: {
              trigger: 'item',
          },
          legend: {
              top: '5%',
              left: 'center',
          },
          series: [
              {
                  name: '当前数量',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                      borderRadius: 10,
                      borderColor: '#fff',
                      borderWidth: 2
                  },
                  label: {
                      show: false,
                      position: 'center',
                  },
                  emphasis: {
                      label: {
                          show: true,
                          fontSize: '30',
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  data: [
                      {value: '', name: 'ICMP'},
                      {value: '', name: 'ARP'},
                      {value: '', name: 'UDP'},
                      {value: '', name: 'TCP'},
                      {value: '', name: 'HTTP'}
                  ]
            }
          ]
      },
      option2:{
        title: {
            text: '各时间刻度数据包数量',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line'
        }]
      },
      tableData:[],
      ip:'',
      arpattack:'',
      synattack:'',
      data:[],
      nodata:{},
    }
  },
  created(){

  },
  mounted(){
  //  this.dogetOne()
  //  this.dogetTwo()
  //  this.dogetThree()
  //  this.dogetFour()
  //  this.dogetFive()
  //  this.dogetSix()
    this.dogetOther()
    this.dogetAll()
  },
  methods:{
    // 饼状图请求数据
    dogetOne(){
      var url='http://127.0.0.1:5000/first'
         this.$axios.get(url).then((res)=>{
           console.log(res.data)
           this.option.series[0].data[0].value=res.data.icmpTotal
           this.option.series[0].data[1].value=res.data.arpTotal
           this.option.series[0].data[2].value=res.data.udpTotal
           this.option.series[0].data[3].value=res.data.tcpTotal
           this.option.series[0].data[4].value=res.data.httpTotal
           this.drawPie()
         })
    },
    // 折线图请求数据
    dogetTwo(){
      var url='http://127.0.0.1:5000/two'
         this.$axios.get(url).then((res)=>{
            console.log(res.data)
            for(var i=0;i<res.data.length;i++){
                this.option2.xAxis.data[i]=res.data[i].time
                this.option2.series[0].data[i]=res.data[i].total
              }
           this.drawLineChart()
         })
    },
    // 表格与地图数据
    dogetThree(){
      var url='http://127.0.0.1:5000/three'
         this.$axios.get(url).then((res)=>{
           console.log(res.data)
           this.tableData=res.data.ipRank
         })
    },
    // 获取本机IP
    dogetFour(){
      var url='http://127.0.0.1:5000/four'
         this.$axios.get(url).then((res)=>{
           console.log(res.data)
           this.ip=res.data.ip
         })
    },
    // 获取ARP攻击数据
    dogetFive(){
      var url='http://127.0.0.1:5000/five'
         this.$axios.get(url).then((res)=>{
           console.log(res.data)
           this.arpattack=res.data
         })
    },
    // 获取SYN攻击数据
    dogetSix(){
      var url='http://127.0.0.1:5000/six'
         this.$axios.get(url).then((res)=>{
           console.log(res.data)
           this.synattack=res.data.synattack
         })
    },
    dogetAll(){
      var url='http://127.0.0.1:5000/one'
         this.$axios.get(url).then((res)=>{
           this.tableData=res.data.ipRank
           if( this.tableData!=''){
             for(var i=0;i<res.data.ipInfo.length;i++){
              var a={name:'',value:null,ip:''}
              a.name=res.data.ipInfo[i].city
              a.ip=res.data.ipInfo[i].ip
              a.value=res.data.ipRank[i].total
              this.data[i]=a

              var key=res.data.ipInfo[i].city
              this.nodata[key]=[res.data.ipInfo[i].longitude,res.data.ipInfo[i].latitude]
            }
            this.drawMap()
           }
         })
    },
    dogetOther(){
      var url='http://127.0.0.1:5000/two'
         this.$axios.get(url).then((res)=>{
           this.synattack=res.data.synattack
           this.arpattack=res.data.arpattack
           this.ip=res.data.hostIP
           this.option.series[0].data[0].value=res.data.protoData.icmpTotal
           this.option.series[0].data[1].value=res.data.protoData.arpTotal
           this.option.series[0].data[2].value=res.data.protoData.udpTotal
           this.option.series[0].data[3].value=res.data.protoData.tcpTotal
           this.option.series[0].data[4].value=res.data.protoData.httpTotal
           for(var i=0;i<res.data.protoTotal.length;i++){
                this.option2.xAxis.data[i]=res.data.protoTotal[i].time
                this.option2.series[0].data[i]=res.data.protoTotal[i].total
              }
            this.drawLineChart()
            this.drawPie()

         })
    },
    //  画饼状图
    drawPie(){
        var myChart=this.$echarts.init(document.getElementById('A1'))
        myChart.setOption(this.option)
    },
    // 折线图
    drawLineChart(){
        var myChart=this.$echarts.init(document.getElementById('B3'))
        myChart.setOption(this.option2)
    },
    // 画地图
    drawMap(){
      var data = this.data
      console.log(data)
      var geoCoordMap = this.nodata
      console.log(geoCoordMap)
      var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
              var geoCoord = geoCoordMap[data[i].name];
              if (geoCoord) {
                  res.push({
                      name: data[i].name,
                      value: geoCoord.concat(data[i].value)
                  });
              }
          }
          return res;
      }
      let option={
          geo:{
              map:'china',
              // center: [104.114129, 37.550339],
              roam:true,
              label:{
                  emphasis:{
                      show:false
                  }
              },
              itemStyle:{
                  normal:{
                      areaColor:'white',
                      borderColor:'blue',
                  },
                  emphasis:{
                      areaColor:'#8c86f7'
                  }
              }
          },
          tooltip : {
              trigger: 'item'
          },
          series:[
              {
                name: '',
                // 带涟漪的点，去掉effect是不带涟漪的点
                type: 'effectScatter',
                coordinateSystem: 'geo',
                // 显示的数据
                data: convertData(data),
                symbolSize: 10,
                label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
                },
                itemStyle: {
                  // 原点的颜色
                  normal: {
                      color: 'green'
                  },
                  emphasis: {
                      borderColor: 'black',
                      borderWidth: 1
                  }
                }
            }
        ]
      }
      var mychart=this.$echarts.init(document.getElementById('B2'))
      mychart.setOption(option)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.hello{
  position:fixed;
  width: 1536px;
  height: 100%;
  margin: 0;
  padding: 0;
}
.hello div{
  float: left;
}
.A{
  width: 26%;
  height: 98%;
  margin:10px 10px 0 10px;
}
.A1{
  width: 400px;
  height: 400px;
  background-color: rgb(161, 192, 192);
  border-radius: 10px;
}
.A2{
  width: 400px;
  height: 301px;
  margin-top: 10px;
  background-color: #af5010;
  border-radius: 10px;
}
.B{
  width: 50%;
  height: 98%;
  margin:8px 10px 0 0;
}
.B1{
  text-align: center;
  line-height: 55px;
  width: 100%;
  height: 55px;
  background-color: #1c4e6b;
  border-radius: 10px;
}
.B2{
  /* width: 100%; */
  width: 768px;
  height:400px;
  /* height: 60%; */
  margin-top: 10px;
  background-color: #15627e;
  border-radius: 10px;
}
.B3{
  height: 237px;
  width:768px;
  margin-top: 10px;
  background-color: rgb(161, 192, 192);
  border-radius: 10px;
}
.C{
  height: 97.5%;
  width: 20%;
  margin-right: 10px;
  background-color: rgb(105, 96, 96);
  margin:10px 10px 0 0;
  border-radius: 10px;
}
.el-table th, .el-table tr {
    background-color: #d0d7db;
}
.has-gutter>tr{
  color:#d58c06
}
</style>
